<template>
  <div class="container">
    <div>
      <div class='u-title f-mtp10'>
        <h2>分类管理</h2>
        <router-link class='u-title-btn' to='/home/addClassify'>添 加</router-link>  
      </div>
      <el-table
        :data="caseTypeList"
        border
        style="width: 100%">
        <el-table-column prop="name" label="分类名称" width="180"></el-table-column>
        <el-table-column label="分类图标" width="180">
          <template slot-scope="scope">
            <img class='img-icon' :src="scope.row.icon" alt="">
          </template>
        </el-table-column>
        
        <el-table-column prop="manage" label="管理" width="180">
          <template slot-scope="scope">
            <router-link  class='s-c-green f-csp f-mrt10' :to='"/home/editClassify/" + scope.row.id'>编辑</router-link>
            <span @click='deleteBtnClickEvent(scope.row.id)' class='s-c-red f-csp'>删 除</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" ></el-table-column>
      </el-table>
      <div class='f-ptp20 f-pbt0'>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          background
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClassifyManage',
  data() {
    return {
      phone: '',
      password: '',
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      caseTypeList: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 删除按钮点击事件
    deleteBtnClickEvent(id) {
      this.$confirm('确定删除该分类', '提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.deleteCaseType(id);
      })
    },
    // 删除
    deleteCaseType(caseTypeId) {
      this.$store.dispatch('HANDLE_CASE_TYPE', {
        id: caseTypeId,
        isDelete: 1
      }).then(res => {
        if(res.data.retCode == 0) {
          this.$message.success('删除成功！');
          this.getList();
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 获取分类列表
    getList() {
      this.$store.dispatch('GET_CASE_TYPE_LIST', {
        pageSize: this.pageSize,
        pageNum: this.currentPage - 1
      }).then(res => {
        if(res.data.retCode == 0) {
          this.caseTypeList = res.data.data;
          this.totalCount = res.data.totalCount;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },

    // 分页组件回调函数
    handleCurrentChange(page) {
      this.currentPage = page;
      this.getList();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.img-icon{
  width: 32px;
  height: 32px;
}
</style>
